<!--
  功能：权限列表
  时间：2023年04月16日 21:36:41
-->
<template>
  <div class="page-bg">
    <an-table
      ref="tableRef"
      v-model="tableData"
      @getList="getList"
      :isCheck="false"
      :pageSizes="[]"
    >
      <template #action>
        <div class="flex action">
          <div class="left">
            <el-button type="primary" @click="addFn(null, routerTypeName.list)"
              >新增目录</el-button
            >
            <el-button type="primary" @click="addFn(null, routerTypeName.menu)"
              >新增菜单</el-button
            >
          </div>
          <div class="right">
            <el-input placeholder="请输入名称、链接、组件、关键词" clearable>
              <template #append><el-button>搜索</el-button></template>
            </el-input>
          </div>
        </div>
      </template>
      <el-table-column label="名称" prop="name" />
      <el-table-column label="链接或标识" prop="url" />
      <el-table-column label="组件" prop="component" width="150" />
      <el-table-column label="类型" width="100" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.type === routerTypeName.list" type="success"
            >目录</el-tag
          >
          <el-tag v-if="scope.row.type === routerTypeName.menu" type="danger"
            >菜单</el-tag
          >
          <el-tag v-if="scope.row.type === routerTypeName.button">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="图标" width="100" align="center">
        <template #default="scope">
          <i class="iconfont" :class="scope.row.img"></i>
        </template>
      </el-table-column>
      <el-table-column label="多语言" prop="lang" width="100" align="center" />
      <el-table-column label="排序" prop="sort" width="100" align="center" />
      <el-table-column label="ID" prop="id" width="50" align="center" />
      <el-table-column fixed="right" label="操作栏" width="150" align="right">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="addFn(scope.row)"
            v-if="scope.row.type != routerTypeName.button"
          >
            新增
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="openEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-popconfirm title="确定删除？" @confirm="delFn(scope.row)">
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </an-table>
    <el-dialog
      v-model="editData.show"
      :title="`${editData.form?.id ? '编辑' : '新增'}`"
      width="500px"
    >
      <el-form :model="editData.form" label-width="120px">
        <el-form-item label="类型">
          <el-input
            v-model="editData.form.typeName"
            autocomplete="off"
            clearable
            disabled
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="所属上级" v-if="editData.form.pidName">
          <el-input
            v-model="editData.form.pidName"
            autocomplete="off"
            clearable
            disabled
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="名称">
          <el-input
            v-model="editData.form.name"
            autocomplete="off"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="链接或标识">
          <el-input
            v-model="editData.form.url"
            autocomplete="off"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="组件路径" v-if="editData.form.pid === 0">
          <el-input
            v-model="editData.form.component"
            autocomplete="off"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="图标" v-if="editData.form.pid === 0">
          <an-icons v-model="editData.form.img" />
        </el-form-item>
        <el-form-item label="多语言配置" v-if="editData.form.pid === 0">
          <el-input
            v-model="editData.form.lang"
            autocomplete="off"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            v-model="editData.form.sort"
            autocomplete="off"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="editData.form.other"
            autocomplete="off"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editData.show = false">取消</el-button>
          <el-button type="primary" @click="subForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { post } from "@/common/http";
import anIcons from "@/components/an-icons.vue";
import anTable from "@/components/an-table.vue";
import {
  tableDataType,
  tableDataQuery,
  routerTypeName,
} from "@/common/interface";
import { ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
import { build_tree } from "@/common/tool";
const tableRef = ref();

class listItem {
  id?: number;
  pid: number;
  type: routerTypeName;
  typeName: string;
  pidName: string;
  name: string;
  url: string;
  img: string;
  component: string;
  other: string;
  sort: number;
  a_show: string;
  lang: string;
  constructor() {
    this.sort = 0;
    this.pid = 0;
    this.other = "";
    this.img = "";
    this.lang = "";
    this.component = "";
    this.url = "";
    this.type = routerTypeName.button;
    this.typeName = "";
    this.pidName = "";
    this.name = "";
    this.a_show = "1";
  }
}

//表格组件数据
const tableData = reactive<tableDataType<listItem>>(new tableDataType());

//获取列表
function getList(data: tableDataQuery): void {
  post("api/Admin/getNode", {
    prop: "id", //需要排序的字段
    sort: "desc", //desc asc
  }).then((res) => {
    tableData.lists = build_tree(res.data.list, 0);
    tableData.total = res.total ?? 0;
    tableData.loading = false;
  });
}

//递归获取需要操作的id
const treeIds = ref<number[]>([]);
function getTreeIdsFn(item: any) {
  treeIds.value.push(item.id);
  if (item.children.length) {
    item.children.forEach((v: any) => {
      getTreeIdsFn(v);
    });
  }
}

//删除 / 批量删除
async function delFn(item?: listItem) {
  treeIds.value = []; //清空上一次获取的id
  getTreeIdsFn(item);
  if (item?.id === 49) {
    return ElMessageBox.alert(
      "该权限是所有角色的基础权限，不能删除",
      "系统提示"
    );
  }
  if (treeIds.value.length > 1) {
    return ElMessageBox.alert(
      `该权限下还包含${treeIds.value.length - 1}个权限，是否全部删除`,
      "系统提示",
      {
        callback: async (action: Action) => {
          if (action === "confirm") {
            await post("api/Admin/delNode", { ids: treeIds.value });
            tableRef.value.reload();
          }
        },
      }
    );
  } else {
    await post("api/Admin/delNode", { ids: treeIds.value });
    tableRef.value.reload();
  }
}

//新增
function addFn(data: listItem | null, type?: routerTypeName) {
  editData.form = new listItem();
  if (type) {
    if (type === routerTypeName.list) {
      editData.form.type = routerTypeName.list;
      editData.form.typeName = "目录";
    }
    if (type === routerTypeName.menu) {
      editData.form.type = routerTypeName.list;
      editData.form.typeName = "菜单";
    }
  } else {
    data = data as listItem;
    if (data.type == routerTypeName.list) {
      editData.form.type = routerTypeName.menu;
      editData.form.typeName = "菜单";
    } else {
      editData.form.type = routerTypeName.button;
      editData.form.typeName = "页面按钮";
    }
    editData.form.pid = data.id as number;
    editData.form.pidName = data.name;
  }
  editData.show = true;
}

class editDataType {
  show: boolean;
  form: listItem;
  constructor() {
    this.show = false;
    this.form = new listItem();
  }
}

const editData = reactive<editDataType>(new editDataType());

function openEdit(data?: listItem) {
  editData.form = JSON.parse(JSON.stringify(data));
  let type = editData.form.type;
  if (type === routerTypeName.list) editData.form.typeName = "目录";
  if (type === routerTypeName.menu) editData.form.typeName = "页面按钮";
  if (type === routerTypeName.button) editData.form.typeName = "页面按钮";
  editData.show = true;
}

const subForm = () => {
  let form: listItem = editData.form;
  post("api/Admin/saveNode", form).then((res) => {
    tableRef.value.reload();
    editData.show = false;
  });
};
</script>

<style scoped lang="scss">
.el-form {
  padding-right: 50px;
}
.action {
  justify-content: space-between;
  .right {
    width: 380px;
    .el-input {
      width: 100%;
    }
  }
}
</style>
